<template>
  <div class="article-manager">
    <div class="i-layout-page-header header_top">
      <div class="i-layout-page-header fl_header">
        <router-link :to="{ path: '/admin/user/resident/list' }"
        >
          <Button icon="ios-arrow-back" size="small" type="text">返回</Button>
        </router-link
        >
        <Divider type="vertical" />
        <span
          class="ivu-page-header-title mr20"
          style="padding: 0"
          v-text="'用户详情'"
        ></span>
      </div>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        class="form"
        ref="formValidate"
        :model="detailsData"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <div class="goodsTitle acea-row">
          <div class="title">用户基础信息</div>
        </div>
        <Row :gutter="24" type="flex">
          <Col v-bind="grid" class="mr50">
            <FormItem label="微信昵称：" prop="wxname" label-for="wxname">
              <span>{{ detailsData.wxname }}</span>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="真实姓名：" prop="names" label-for="names">
              <span>{{ detailsData.names }}</span>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="手机号码：" prop="title" label-for="title">
              <span>{{ detailsData.phone }}</span>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="身份证号：" prop="zjhao" label-for="zjhao">
              <span>{{ detailsData.zjhao }}</span>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="注册时间：" prop="time" label-for="time">
              <span>{{ detailsData.time }}</span>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="用户等级：" prop="state" label-for="state">
              <div v-if="detailsData.state == 0">一级</div>
              <div v-if="detailsData.state == 1">二级</div>
              <div v-if="detailsData.state == 2">三级</div>
            </FormItem>
          </Col>
        </Row>
        <div v-for="(item, index) in detailsData.openuserFwList">
          <div class="goodsTitle acea-row">单元号：{{ item.xqlhdanyuanhao }}</div>
          <Row>
            <Col v-bind="grid" class="mr50">
              <FormItem label="所属街道：" prop="sqmc" label-for="sqmc">
                <span>{{ detailsData.fwzuoluo }}</span>
              </FormItem>
            </Col>
            <Col v-bind="grid" class="mr50">
              <FormItem label="小区：" prop="xqname" label-for="xqname">
                <span>{{ detailsData.xqname }}</span>
              </FormItem>
            </Col>
            <Col v-bind="grid" class="mr50">
              <FormItem label="楼号：" prop="jandxqnamexqlouhao" label-for="jandxqnamexqlouhao">
                <span>{{ item.jandxqnamexqlouhao }}</span>
              </FormItem>
            </Col>
            <Col v-bind="grid" class="mr50">
              <FormItem label="单元号：" prop="xqlhdanyuanhao" label-for="xqlhdanyuanhao">
                <span>{{ item.xqlhdanyuanhao }}</span>
              </FormItem>
            </Col>
            <Col v-bind="grid" class="mr50">
              <FormItem label="楼长：" prop="islz" label-for="islz">
                <span v-if="item.islz == 1">是</span>
                <span v-if="item.islz == 0">否</span>
              </FormItem>
            </Col>
            <Col v-bind="grid" class="mr50">
              <FormItem label="房本信息：" prop="islz" label-for="islz">
                <div class="picBox">
                  <div class="pictrue" v-viewer>
                    <img :src="item.fczimg" />
                  </div>
<!--                  <div class="upLoad acea-row row-center-wrapper" v-else>-->
<!--                    <Icon type="ios-camera-outline" size="24" />-->
<!--                  </div>-->
                </div>
              </FormItem>
            </Col>
          </Row>
          <Row>
          </Row>
        </div>
        <FormItem>
          <Button type="primary" class="submission" @click="$router.go(-1)">返回</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import uploadPictures from "@/components/uploadPictures";
import WangEditor from "@/components/wangEditor/index.vue";
import { cmsAddApi, createApi, categoryTreeListApi } from "@/api/cms";
import { detailsApi, premisesPermitApi } from "@/api/user";

export default {
  name: "userDetails",
  components: { uploadPictures, WangEditor },
  data() {
    const validateUpload = (rule, value, callback) => {
      if (this.detailsData.image_input) {
        callback();
      } else {
        callback(new Error("请上传图文封面"));
      }
    };
    const validateUpload2 = (rule, value, callback) => {
      if (!this.detailsData.cid) {
        callback(new Error("请选择文章分类"));
      } else {
        callback();
      }
    };
    return {
      dialog: {},
      isChoice: "单选",
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      loading: false,
      formValidate: {
        id: 0,
        title: "",
        author: "",
        image_input: "",
        content: "",
        synopsis: "",
        url: "",
        is_hot: 0,
        is_banner: 0,
        cid: "",
        visit: 0,
        isRacking: 0
      },
      content: "",
      ruleValidate: {
        // title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        // cid: [
        //   {
        //     required: true,
        //     validator: validateUpload2,
        //     trigger: "change",
        //     type: "number"
        //   }
        // ],
        image_input: [{ required: true, validator: validateUpload, trigger: "change" }],
        content: [{ required: true, message: "请输入文章内容", trigger: "change" }]
      },
      value: "",
      modalPic: false,
      template: false,
      treeData: [],
      formValidate2: {
        type: 1
      },
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        UEDITOR_HOME_URL: "/admin/UEditor/",
        serverUrl: ""
      },
      detailsData: [],
      premisesPermit: []
    };
  },
  computed: {
    ...mapState("media", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    }
  },
  watch: {
    $route(to, from) {
      if (this.$route.params.id) {
        this.getDetails();
      } else {
        this.formValidate = {
          id: 0,
          title: "",
          author: "",
          image_input: "",
          content: "",
          synopsis: "",
          url: "",
          is_hot: 0,
          is_banner: 0
        };
      }
    }
  },
  mounted() {
    if (this.$route.params.id) {
      this.getDetails(this.$route.params.id);
    }
  },
  created() {
    this.getClass();
  },
  methods: {
    getEditorContent(data) {
      this.content = data;
    },
    // 选择图片
    modalPicTap() {
      this.modalPic = true;
    },
    // 选中图片
    getPic(pc) {
      this.formValidate.image_input = pc.att_dir;
      this.modalPic = false;
    },
    // 分类
    getClass() {
      categoryTreeListApi()
        .then(async (res) => {
          this.treeData = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 提交|发布数据
    onsubmit(name, isRacking = 0) {
      this.$refs[name].validate((valid) => {
        this.formValidate.content = this.content;
        this.formValidate.isRacking = isRacking;
        if (valid) {
          cmsAddApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
              setTimeout(() => {
                this.$router.push({ path: "/admin/cms/article/index" });
              }, 500);
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
          return false;
        }
      });
    },
    // 会员详情
    getDetails(id) {
      this.activeName = "order";
      this.userId = id;
      this.spinShow = true;
      detailsApi(id)
        .then(async (res) => {
          if (res.code === 0) {
            let data = res.data;
            this.detailsData = data;
            // this.getPremisesPermit(data.openid);
          } else {
            // this.spinShow = false;
            this.$Message.error(res.msg);
          }
        })
        .catch((res) => {
          this.spinShow = false;
          this.$Message.error(res.msg);
        });
    },

    //获取房本信息
    getPremisesPermit(openid) {
      premisesPermitApi({ openid: openid, current: 1, size: 100 })
        .then(async (res) => {
          if (res.code === 0) {
            this.premisesPermit = res.data.records;
          } else {
            // this.spinShow = false;
            this.$Message.error("获取房本信息失败");
          }
        })
        .catch((res) => {
          this.spinShow = false;
          this.$Message.error(res.msg);
        });
    }
  }
};
</script>
<style scoped>
/deep/ .ivu-form-item-content {
    line-height: unset !important;
}

.picBox {
    display: inline-block;
    cursor: pointer;
}

.form .goodsTitle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
    margin-top: 20px;
}

.form .goodsTitle .title {
    border-bottom: 2px solid #1890ff;
    padding: 0 8px 12px 5px;
    color: #000;
    font-size: 14px;
}

.form .goodsTitle .icons {
    font-size: 15px;
    margin-right: 8px;
    color: #999;
}

.form .add {
    font-size: 12px;
    color: #1890ff;
    padding: 0 12px;
    cursor: pointer;
}

.form .radio {
    margin-right: 20px;
}

.form .submission {
    width: 10%;
    margin-left: 27px;
}

.form .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
    color: #898989;
}

.form .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
}

.form .pictrue img {
    width: 100%;
    height: 100%;
}

.Modals .address {
    width: 90%;
}

.Modals .address .iconfont {
    font-size: 20px;
}

.tip {
    margin-top: 10px;
    color: #bbb;
}
</style>
